<template>
    <h5>父组件</h5>
    <div class="box">
        <GlobalComponent />
        <LocalComponent />
    </div>
</template>

<style scoped>   /* Vue为<style>标签提供了scoped属性，用于解决组件之间的样式冲突*/
.box {
    display: flex;
}
h5 {
    border: 1px dotted black;
}
/*如果给当前组件的<style>标签添加了scoped属性，则当前组件的样式对其子组件是不生效的。
如果在添加了scoped属性后还需要让某些样式对子组件生效，则可以使用深度选择器来实现。*/
/* 样式穿透 */
:deep(.title){
    border: 3px dotted black;
}
</style>
<script setup>
import LocalComponent from './LocalComponent.vue';
</script>

<!-- 为<style>标签添加scoped属性后，Vue会自动为当前组件的DOM元素添加一个唯一的自定义属性（如data-v-7ba5bd90），
 并在样式中为选择器添加自定义属性（如.list[data-v-7ba5bd90]），从而限制样式的作用范围，防止组件之间的样式冲突问题。 -->